<template>
    <div class="LearnPeople">
		<chart :options="line" ref="line" auto-resize/>
    </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import 'echarts/lib/component/dataZoom'

let echarts1 = require("echarts/lib/echarts");
export default {
  name: 'learnPeople',
  components: {
    chart: Echarts
  },
  props: {
    lineData: Array
  },
  data() {
    return {
      line: {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: "#EFF0F6"
            }
          },
          axisLabel: {
            color: "rgba(155,155,155,1)",
            fontSize: 12,
            lineHeight: 20,
            height: 20,
            margin: 10,
            fontFamily: "PingFang SC"
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          splitLine: {
            show: false
          },
          axisPointer: {
            type: "none"
          },
          data: []
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            alignWithLabel: true,
            show: false
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#EFF0F6"
            }
          },
          axisLabel: {
            color: "rgba(155,155,155,1)",
            show: true,
            inside: false,
            margin: 0,
            verticalAlign: "bottom",
            fontSize: 12,
            fontFamily: "PingFang SC",
            padding: [0, 0, 5, 0]
          },
          name: "",
          minInterval: 1
        },
        grid: {
          top: 32,
          left: 0,
          right: 0,
          bottom: 10,
          containLabel: true
        },
        series: [
          {
            type: "line",
            smooth: true,
            data: [],
            showSymbol: true,
            clipOverflow: false,
            areaStyle: {
              color: new echarts1.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(97,169,255,0.7) "
                  },
                  {
                    offset: 1,
                    color: "rgba(97,169,255,0)"
                  }
                ],
                false
              )
            },
            lineStyle: {
              color: "#61A9FF",
              width: 2,
              shadowBlur: 4,
              shadowOffsetY: 2,
              shadowColor: "rgba(255,255,255,.5)"
            },
            symbol:
              "image://https://qn-sfe.yuketang.cn/o_1d1pkh5h1tu51rt2ibf1nci136v9.png",
            symbolSize: 12,
            label: {
              show: true,
              position: 'top',
              color: '#5096f5'
            }
          }
        ],
        // tooltip: {
        //   show: true,
        //   trigger: "axis",
        //   backgroundColor: "#61A9FF",
        //   padding: 10,
        //   extraCssText: "text-align:left",
        //   textStyle: {
        //     fontSize: 12,
        //     fontWeight: "bold"
        //   },
        //   showContent: true
        // }
      }
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let self = this;
      this.init();
    });
  },
  methods: {
    init() {
      this.setLine();
    },
    setLine() {
      let self = this;
      this.$nextTick(() => {
        if (this.lineData.length) {
          this.line.xAxis.data = [];
          this.line.series[0].data = [];
          this.lineData.length &&
            this.lineData.forEach((item, index) => {
              this.line.xAxis.data.push(item.date);
              this.line.series[0].data.push(item.people);
            });
          if(this.lineData.length > 14){
              this.line.dataZoom = [
                {
                  type: "inside",
                  startValue: 0,
                  endValue: this.lineData.length,
                  minSpan: 0,
                  maxSpan: 100,
                  zoomOnMouseWheel: false,
                  moveOnMouseWheel: false,
                  moveOnMouseMove: true
                },
                {
                  type: "slider",
                  show: true,
                  startValue: 0,
                  endValue: this.lineData.length,
                  height: 15,
                  handleSize: 22,
                  showDataShadow: false,
                  bottom: 0,
                  textStyle: {
                    color: "transparent"
                  },
                  fillerColor: "#eee",
                  borderColor: "#eee",
                  handleStyle: {
                    color: "#c8c8c8"
                  }
                }
              ];
              this.$refs.line.clear();
              this.line.grid.bottom = 30;
          }else {
              this.line.dataZoom = null
              this.$refs.line.clear()
              this.line.grid.bottom = 10
          }
          
          // this.$refs.line.mergeOptions(this.line)
          setTimeout(() => {
            if (self.$refs.line) {
              self.$refs.line.mergeOptions(self.line) 
            }
          }, 500);
        } else {
          this.$refs.line.clear();
        }
      });
    },
    formatTime(timestamp) {
      let date = new Date(timestamp * 1000);
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return `${month}.${day}`;
    }
  },
  watch: {
    lineData(newVal) {
      if (newVal) {
        this.setLine();
      }
    }
  }
};
</script>

<style lang="scss">
.LearnPeople {
  height: 100%;
  margin: 0;
  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
